.dispatch-main-container {
  display: flex;

  .left-panel {
    width: 400px;
  }

  .right-panel {
    width: 450px;
    height: calc(100vh - 90px);
    margin: 10px 0;
  }

  .center-panel {
    height: calc(100vh - 90px);
    position: relative;
    background: #fff;
    flex: 1;
    margin: 10px;

    .banner {

      .stations-wrap {
        margin: 0 25px 0 20px;
        background: linear-gradient(0deg, rgba(79, 109, 250, 1), rgba(90, 166, 249, 1));
        border-radius: 4px;

        .title {
          font-size: 20px;
          padding: 5px 20px;
          height: 30px;
          color: #ffffff;
        }

        .area-wrap {
          display: flex;
          flex-wrap: wrap;

          .area {
            padding: 10px 15px 10px 15px;
            width: 125px;
            color: #ffffff;
            height: 70px;

            .value {
              font-size: 20px;
              font-weight: bold;
              padding-left: 15px;

              .dw {
                color: #D1E2FF;
                margin-left: 4px;
                font-size: 12px;
                font-weight: normal;
              }
            }
          }
        }
      }
    }
  }

  .canvas-wrap {
    margin: 15px;
    height: calc(100vh - 220px);
    width: calc(100vw - 420px);
    background-image: url("../../../../../assets/images/realtime-control/emerge-dispatch-home-bg.jpg");
    background-size: 100% 100%;
    position: relative;

    div {
      font-size: 20px;
      font-weight: bold;
      color: #ffffff;
      padding: 0 20px;

    }


    .area1 {
      position: absolute;
      top: 2%;
      left: 3.5%;
      width: 370px;
      height: 210px;
      background-image: url("../../../../../assets/images/realtime-control/emergency-home-bg1.png");
      background-size: 100% 100%;
      border-radius: 10px;
      padding-top: 20px;
      cursor: pointer;

      div {
        margin: 8px;
      }
    }

    .area2 {
      position: absolute;
      top: 0;
      right: 0;
      width: 360px;
      height: 210px;
      background-image: url("../../../../../assets/images/realtime-control/emergency-home-bg2.png");
      background-size: 100% 100%;
      border-radius: 10px;
      padding-top: 13px;
      cursor: pointer;

      div {
        margin: 4px;
      }
    }

    .area3 {
      position: absolute;
      bottom: 4%;
      left: 9%;
      width: 360px;
      height: 210px;
      background-image: url("../../../../../assets/images/realtime-control/emergency-home-bg3.png");
      background-size: 100% 100%;
      border-radius: 10px;
      padding-top: 20px;
      cursor: pointer;

      div {
        margin: 8px;
      }
    }

    .area4 {
      position: absolute;
      bottom: 5%;
      right: 18%;
      width: 360px;
      height: 210px;
      background-image: url("../../../../../assets/images/realtime-control/emergency-home-bg4.png");
      background-size: 100% 100%;
      border-radius: 10px;
      padding-top: 20px;
      cursor: pointer;

      div {
        margin: 8px;
      }
    }

    .divider {
      position: absolute;
      top: 50%;
      left: 3%;
      height: 7px;
      width: 94%;
      background: #F59A23;
    }

  }
}

